<template>
  <div class="page-header-index-wide">
    <a-card v-has="'statistical'" :bordered="false" title="系统概览" class="overview">
      <a-row ref="Overview" :gutter="[48,48]" type="flex">
        <a-col flex="auto">
          <div class="overviewItem overviewItem2">
            <h3>进场车辆</h3>
            <div>
              <b>{{ EnteredCarNumber }}</b>
              <span style="position: absolute;margin-top: 19px">辆</span>
            </div>
          </div>
        </a-col>
        <a-col flex="auto">
          <div class="overviewItem overviewItem3">
            <h3>出场车辆</h3>
            <div><b>{{ LeavedCarNumber }}</b>
              <span style="position: absolute;margin-top: 19px">辆</span></div>
          </div>
        </a-col>
        <a-col flex="auto">
          <div class="overviewItem overviewItem4">
            <h3>今日收费</h3>
            <div><b>{{ TotalCharge }}</b>
              <span style="position: absolute;margin-top: 19px">元</span></div>
          </div>
        </a-col>
      </a-row>
    </a-card>
    <a-card v-has="'statistical'" :bordered="false" title="近十五天收入分析">
      <div class="chartWrap" id="incomeChartWrap" style="height:300px;"></div>
    </a-card>
    <a-card v-has="'statistical'" :bordered="false" title="近十五天车流量分析">
      <div class="chartWrap" id="CarVolumeChartWrap" style="height:300px;"></div>
    </a-card>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-card title="缴费记录">
          <a href="#/order/ParkOrderInfoList" v-has="'admin:parkCode'" slot="extra">更多</a>
          <a-table :pagination="false" :columns="columns_pay" :data-source="data_pay" rowKey="id">
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="停车记录">
          <a href="#/parking/parkCarEnterLog/parkCarEnterLogList" v-has="'admin:parkCode'" slot="extra">更多</a>
          <a-table :pagination="false" :columns="columns_park" :data-source="data_park" rowKey="id">
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import {
    getAction,
    httpAction,
    postAction
  } from "@api/manage";

  const columns_pay = [{
      title: '车场名称',
      dataIndex: 'parkName',
      scopedSlots: {
        customRender: 'parkName'
      }
    },
    {
      title: '车牌',
      dataIndex: 'plateNo',
      scopedSlots: {
        customRender: 'plateNo'
      }

    },
    {
      title: '缴费金额',
      dataIndex: 'chargeTotalFee',
      scopedSlots: {
        customRender: 'chargeTotalFee'
      },
      customRender: function (t) {
          return (t / 100).toFixed(2);
        }
    },
    {
      title: '时间',
      dataIndex: 'createTime',
      scopedSlots: {
        customRender: 'createTime'
      }
    }
  ]
  const columns_park = [{
      title: '车场名称',
      dataIndex: 'parkName',
      scopedSlots: {
        customRender: 'parkName'
      }
    },
    {
      title: '车牌',
      dataIndex: 'plateNo',
      scopedSlots: {
        customRender: 'plateNo'
      }
    },
    {
      title: '入口',
      dataIndex: 'armName',
      scopedSlots: {
        customRender: 'armName'
      }
    },
    {
      title: '时间',
      dataIndex: 'carEnterTime',
      scopedSlots: {
        customRender: 'carEnterTime'
      }
    }
  ]
  export default {
    name: 'Analysis',
    components: {},
    data() {
      return {
        data_pay: [],
        data_park: [],
        columns_pay,
        columns_park,
        ParkCode: '',
        ParkNumber: '0',
        EnteredCarNumber: '0',
        LeavedCarNumber: '0',
        TotalCharge: '0',
        url: {
          ParkList: '/parking/parkInfo/list',
          GetDaliyOrderInfor: '/dashboard/analysis/GetDaliyOrderInfor',
          AnalysisData: '/dashboard/analysis/AnalysisData',
          GetCarInAndOut: '/form/ParkTotalInfo/list'
        },
        ParkOptions: [{
          value: '',
          label: '请选择停车场'
        }],
        MyChartXData: [],
        MyChartYTime: [],
        MyChartTotal:0,
        //车辆出入属性
        MyChartXDataForCar:[],
        CarEnterVolume: [],
        CarOutVolume: [],
        moneyResizeTimer:null,
        carResizeTimer:null,
        moneyChart:null,
        carChart:null
      }
    },
    mounted() {
      this.getParkData() //得到停车场数据
      this.chartCreateForCar();
    },
    methods: {

      getIncomeInfo() {
        this.$nextTick(() => {
          this.chartCreate();
        });
      },
      chartCreate() {
        this.ResetChart()

        const Params = {};
        Params.parkCode = this.ParkCode
        let total = 0;
        httpAction(this.url.GetDaliyOrderInfor, Params, "post").then((res) => {
          if (res.success) {
            res.result.forEach((DaliyCharge) => {
              this.MyChartXData.push(String(DaliyCharge.createTime))
              this.MyChartYTime.push(String(Math.floor(DaliyCharge.orderMount / 100)))
               total += Math.floor(DaliyCharge.orderMount / 100);
            })
            this.MyChartTotal = total;
            this.chartRender();
          } else {
            this.$message.error(res.message)
          }
        })

      },
      chartRender() {
        const that = this
        // 绘制图表
        let ele = document.getElementById('incomeChartWrap');
        if(!ele){return;}
        const myChart = echarts.init(ele);
        myChart.setOption({
          title: {
            text: '收入金额：{num|' + this.MyChartTotal + '}元',
            textStyle: {
              rich: {
                num: {
                  color: '#3572E2',
                  fontWeight: 'bold',
                  fontSize: 18
                }
              }
            },
            left: 'center'

          },
          grid: {
            left: '5%',
            right: '5%'
          },
          xAxis: {
            data: this.MyChartXData
          },
          yAxis: [{
            axisLabel: {
              formatter: (value) => {
                return value + '元'
              }
            }
          }],
          series: [{
            type: 'line',
            data: this.MyChartYTime,
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(207, 223, 255, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 255, 255, 1)'
                  }
                ]
              }
            },
            lineStyle: {
              color: 'rgba(90, 148, 255, 1)'
            },
            itemStyle: {
              color: 'rgba(90, 148, 255, 1)'
            }
          }],
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(53, 109, 249, .8)',
            formatter: '{b}<br />收益：{c}元',
            position: 'top'
          }
        });
        that.moneyChart = myChart
        if(that.moneyResizeTimer!==null)
        {
          window.clearTimeout(that.moneyResizeTimer)
        }
        that.moneyResizeTimer = setTimeout(function (){
          window.onresize = function () {
            if(that.moneyChart!==null)
            {
              that.moneyChart.resize()
            }
            if(that.carChart!==null)
            {
              that.carChart.resize()
            }
          }
        },300)
      },
      //读取车辆出入并画图
      chartCreateForCar() {
        const that =this
        let Params = {};
        Params.parkCode = this.ParkCode
        getAction(this.url.GetCarInAndOut, Params).then((res) => {
          if(!document.getElementById('CarVolumeChartWrap'))
          {
            return
          }
          const myChart = echarts.init(document.getElementById('CarVolumeChartWrap'));
          var EnterNumber = 0
          var OutNumber = 0
          res.length=10
          this.ResetChart()
          res.result.forEach((item) => {
            this.MyChartXDataForCar.push(String(item.time))
            this.CarEnterVolume.push(String(item.enterCarNumber))
            EnterNumber += item.enterCarNumber
            this.CarOutVolume.push(String(item.outCarNumber))
            OutNumber += item.outCarNumber
          })
          myChart.setOption({
            title: {
              text:'停车场进出车辆统计('+'总记：{num|'+(EnterNumber+OutNumber)+'}辆)',
              textStyle: {
                rich: {
                  num: {
                    color: '#000000',
                    fontWeight: 'bold',
                    fontSize: 18
                  }
                }
              },
              left: 'center'

            },
            grid: {
              left: '5%',
              right: '5%'
            },
            xAxis: {
              data: this.MyChartXDataForCar,
              nameGap: 15,
              axisLabel: {
                interval:0,
                rotate:40
              }
            },
            yAxis: [{
              axisLabel: {
                formatter: (value) => {
                  return value + '辆'
                }
              },
              splitNumber:10
            }],

            series: [
              {
                name: '入场车辆',
                type: 'line',
                data: this.CarEnterVolume,
                smooth: true,

                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0, color: 'rgb(216,255,207)'
                      },
                      {
                        offset: 1, color: 'rgb(255,255,255)'
                      }
                    ]
                  }
                },
                lineStyle: {
                  color: 'rgba(90, 148, 255, 1)'
                },
                itemStyle: {
                  color: 'rgb(216,255,207)'
                },
              },
              {
                name: '出场车辆',
                type: 'line',
                data: this.CarOutVolume,
                smooth: true,
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0, color: 'rgba(207, 223, 255, 1)'
                      },
                      {
                        offset: 1, color: 'rgba(255, 255, 255, 1)'
                      }
                    ]
                  }
                },
                lineStyle: {
                  color: 'rgb(90,148,255)'
                },
                itemStyle: {
                  color: 'rgb(56,123,255)'
                },
              },
            ],
            tooltip: {
              trigger: 'axis',
              backgroundColor:'rgba(53,109,249,0.8)',
              formatter:function (params,ticket,callback) {

                var Form = params[0].axisValue + "<br/><br/>"
                params.forEach((data)=>{
                  Form += "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+data.color+"\"></span>" + data.seriesName+"：" + data.data+"  辆"+"<br/>"
                })
                return Form
              }
            }
          });
          that.carChart = myChart
          if(that.carResizeTimer!==null)
          {
            window.clearTimeout(that.carResizeTimer)
          }
          that.carResizeTimer = setTimeout(function (){
            window.onresize = function () {
              if(that.moneyChart!==null)
              {
                that.moneyChart.resize()
              }
              if(that.carChart!==null)
              {
                that.carChart.resize()
              }
            }
          },300)
        })
      },
      getParkData() {
        var Params = {}
        httpAction(this.url.ParkList, Params, "get").then((res) => {
          if (res.success) {
            this.ParkOptions = [{
              value: '',
              label: '请选择车场'
            }]
            res.result.records.forEach((park) => {
              this.ParkOptions.push({
                value: park.parkCode,
                label: park.parkName
              })
            })
            this.ParkCode = this.ParkOptions[0].value
            this.GetAnaliys()
            this.chartCreate()
          }
        })
      },

      ParkSelect(value) {
        this.ParkCode = value
        this.getIncomeInfo()
      },
      ResetChart() {
        this.MyChartXData = []
        this.MyChartYTime = []
      },
      GetAnaliys() {
        var Params = {}
        Params.ParkCode = this.ParkCode
        postAction(this.url.AnalysisData, Params).then((res) => {
          if (res.success) {
            let ParkInfo = []
            let id = 0
            //获取停车场入场信息
            res.result.EnterInfo.forEach((pay) => {
              ParkInfo.push({
                id: id,
                parkName: pay.parkName,
                plateNo: pay.plateNo,
                armName: pay.armName,
                carEnterTime: pay.createTime
              })
              id++
            })
            this.data_park = ParkInfo

            //获取停车场支付信息
            let PayInfo = []
            id = 0
            res.result.parkorderinfos.forEach((pay) => {
              PayInfo.push({
                id: id,
                parkName: pay.parkName,
                plateNo: pay.plateNo,
                chargeTotalFee: pay.chargeUnpaid,
                createTime: pay.createTime
              })
              id++
            })
            this.data_pay = PayInfo

            //获取停车场每日入场车辆和出场车辆计费
            this.EnteredCarNumber = res.result.dailyEnterCarNumber ? res.result.dailyEnterCarNumber : 0
            this.LeavedCarNumber = res.result.DailyOutCarNumber ? res.result.DailyOutCarNumber : 0
            this.TotalCharge = res.result.dailyCharge ? Math.floor(res.result.dailyCharge.orderMount / 100) : 0
            this.ParkNumber = this.ParkOptions.length
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .ant-card {
    margin-top: 24px;
  }

  .overview {
    color: #fff;

    .overviewItem {
      text-align: center;
      padding: 20px 0;
      border-radius: 8px;
      box-shadow: 0px 4px 6px 0px rgba(93, 49, 252, 0.2);
      position: relative;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .overviewItem1 {
      background-image: url("~@assets/bg1.png");
    }

    .overviewItem2 {
      background-image: url("~@assets/bg2.png");
    }

    .overviewItem3 {
      background-image: url("~@assets/bg3.png");
    }

    .overviewItem4 {
      background-image: url("~@assets/bg4.png");
    }

    h3 {
      font-size: 20px;
      color: inherit;
      font-weight: normal;
      width: 6em;
      margin: auto;
    }

    b {
      font-size: 30px;
      width: 100%;
    }
  }

  .circle-cust {
    position: relative;
    top: 28px;
    left: -100%;
  }
</style>
